<template>
  <div class='operate-modal'>
    <a-modal
          :visible="visible"
          :title="titleModel"
          @ok="handleOk"
          @cancel="handleBtn"
          :maskClosable="false"
        >
          <!-- 上传 -->
          <div class="data-upload" v-if="titleModel === '上传'">
            <div class="month">
              <label class="mark" for="">{{label}}：</label>
              <div>
                <a-select
                  v-model="upSelectTime"
                  style="width: 200px"
                >
                  <a-select-option v-for="(item, index) in upTimeList" :key="index" :value="item">
                    {{ item }}{{label.substring(2, 3)}}
                  </a-select-option>
                </a-select>
                <a-alert
                  v-if="flag1"
                  :message="`此${label.substring(2)}当前已有数据，上传将覆盖旧数据`"
                  banner
                />
              </div>
            </div>
            <div class="headline">
              <label class="mark" for="">标题：</label>
              <div class="upload-btn">
                <a-upload
                  :file-list="fileList"
                  accept=".xls,.xlsx"
                  :beforeUpload="(file)=> { fileList = [...fileList, file]; return false }"
                  @change="changeUploadStatus"
                  :remove="handleRemove"
                >
                  <a-button> <a-icon type="upload" /> 上传文件 </a-button>
                </a-upload>
                <a-alert
                  v-if="flag2"
                  message="当前还未上传文件，请选择要上传的Excel表！"
                  banner
                />
              </div>
            </div>
          </div>
          <!-- 导出 -->
          <div class="data-export" v-if="titleModel === '导出'">
            <div class="month">
              <label class="mark" for="">选择数据：</label>
              <div>
                <a-select
                  v-model="exportSelectTime"
                  style="width: 200px"
                >
                  <a-select-option v-for="(item, index) in record.progress" :key="index" :value="item">
                    {{ item }}{{label.substring(2, 3)}}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>
          <!-- 删除 -->
          <div class="data-delete" v-if="titleModel === '删除'">
            <div class="month">
              <label class="mark" for="">选择数据：</label>
              <div>
                <a-select
                  v-model="exportSelectTime"
                  style="width: 200px"
                >
                  <a-select-option v-for="(item, index) in record.progress" :key="index" :value="item">
                    {{ item }}{{label.substring(2, 3)}}
                  </a-select-option>
                </a-select>
              </div>
            </div>
          </div>
    </a-modal>
    <!-- 上传失败 -->
    <a-modal
      :visible="isShow1 && status === 0"
      title="上传失败"
      @ok="$emit('update:isShow1', false); isShow2 = false"
      @cancel="$emit('update:isShow1', false); isShow2 = false"
      :maskClosable="false"
    >
      <div class="data-upload-fail">
        <p>表格错误项说明</p>
        <div class="data-table">
          <universal-table
            rowKey="id"
            :columns="columns"
            :data="dataList"
          ></universal-table>
        </div>
      </div>
    </a-modal>
    <div class="modal-tip" v-if="isShow2">
      <!-- 正在上传中 -->
      <div class="data-uploading" v-show="status === 1">
        <p>正在解析中</p>
        <div class="progress">
          <div class="sphere sphere1"></div>
          <div class="sphere sphere2"></div>
          <div class="sphere sphere3"></div>
          <div class="sphere sphere4"></div>
          <div class="sphere sphere5"></div>
          <div class="sphere sphere6"></div>
          <div class="sphere sphere7"></div>
          <div class="sphere sphere8"></div>
          <div class="sphere sphere9"></div>
          <div class="sphere sphere10"></div>
        </div>
      </div>
      <!-- 上传成功 -->
      <div class="data-upload-success" v-show="status === 2">
        <p>上传成功</p>
        <a-icon type="check-circle" class="icon"  theme="filled"/>
        <div class="btn">
          <a-button type="primary" @click="() => { isShow2 = false; }">关闭</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import { getScale } from '@/utils/rem'
// import { dataDelete, dataImport, exportData } from '@/api/System/Data/dataUpload'

export default {
  name: 'operateModal',
  props: {
    titleModel: {
      type: String,
      default: () => ''
    },
    visible: {
      type: Boolean,
      default: () => false
    },
    isShow1: {
      type: Boolean,
      default: () => false
    },
    currentIndex: {
      type: Number,
      default: () => 0
    },
    selectYear: {
      type: Number,
      default: () => new Date().getFullYear()
    },
    record: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    ...mapState('user', ['token', 'userInfo']),
    upTimeList () {
      switch (this.currentIndex) {
        case 0:
          return [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
        case 1:
          return [1, 2, 3, 4]
        case 2:
          return this.yearList
        default:
          return []
      }
    },
    yearList () {
      const year = new Date().getFullYear()
      const arr = []
      for (let i = 2015; i <= year; i++) {
        arr.push(i)
      }
      return arr
    },
    label () {
      switch (this.currentIndex) {
        // 月度
        case 0:
          return '更新月份'
        // 季度
        case 1:
          return '更新季度'
        // 年度
        case 2:
          return '更新年度'
      }
      return ''
    },
    flag1 () {
      switch (this.currentIndex) {
        case 0:
          return this.record.progress.includes(this.upSelectTime)
        case 1:
          return this.record.progress.includes(this.upSelectTime)
        case 2:
          return this.record.progress.includes(this.upSelectTime)
        default:
          return true
      }
    },
    flag2 () {
      if (this.file) {
        return false
      } else {
        return true
      }
    }
  },
  components: {
  },
  data () {
    return {
      loading: false,
      // getScale,
      currentPage: 1,
      total: 0,
      dataList: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'id',
          // width: 30 * getScale(),
          algin: 'center'
        },
        {
          title: '列号',
          dataIndex: 'colNum',
          // width: 30 * getScale(),
          algin: 'center'
        },
        {
          title: '行号',
          dataIndex: 'rowNum'
          // width: 30 * getScale()
        },
        {
          title: '数值内容',
          dataIndex: 'data'
          // width: 30 * getScale()
        }
      ],
      isShow2: false,
      status: 0,
      fileList: [],
      file: null,
      exportSelectTime: undefined,
      upSelectTime: undefined
    }
  },
  created () {
  },
  mounted () {

  },
  watch: {
    record: {
      handler (val) {
        switch (this.titleModel) {
          case '上传':
            this.upSelectTime = this.upTimeList[0]
            break
          case '导出':
          case '删除':
            this.exportSelectTime = val.progress[0]
            break
        }
      },
      deep: true
    }
  },
  methods: {
    handleBtn () {
      this.$emit('update:visible', false)
      this.file = undefined
      this.fileList = []
    },
    // 确认模态框
    handleOk () {
      const formData = new FormData()
      let content = ''
      const { id, year, dataType, type } = this.record

      if (this.titleModel === '删除') {
        this.$emit('update:visible', false)
        const params = { id, year }
        switch (this.currentIndex) {
          case 0:
            content = `即将删除${year}年-${this.exportSelectTime}月${dataType}表名，是否确认？`
            params.month = this.exportSelectTime
            break
          case 1:
            content = `即将删除${year}年-${this.exportSelectTime}季度${dataType}表名，是否确认？`
            params.quarter = this.exportSelectTime
            break
          case 2:
            content = `即将删除${this.exportSelectTime}年度${dataType}表名，是否确认？`
            break
        }
        this.$confirm({
          title: '数据删除确认',
          content,
          okText: '确 定',
          icon: () => <a-icon type="close-circle" theme="filled" style="color: red"/>,
          cancelText: '取 消',
          onOk: () => {
            // dataDelete(params).then((res) => {
            //   if (res === 'success') {
            //     this.$emit('update')
            //     this.$message.success('删除成功！')
            //   } else {
            //     this.$message.error('删除失败！')
            //   }
            // })
          },
          onCancel: () => {
            this.exportSelectTime = this.record.progress[0]
          }
        })
      } else if (this.titleModel === '上传') {
        formData.append('type', type)
        formData.append('year', year)
        formData.append('id', id)
        if (this.file) {
          this.$emit('update:visible', false)
        }
        switch (this.currentIndex) {
          case 0:
            content = `即将导入${year}年-${this.upSelectTime}月${dataType}表名，是否确认？`
            formData.append('month', this.upSelectTime)
            break
          case 1:
            content = `即将导入${year}年-${this.upSelectTime}季度${dataType}表名，是否确认？`
            formData.append('quarter', this.upSelectTime)
            break
          case 2:
            content = `即将导入${this.upSelectTime}年度${dataType}表名，是否确认？`
            break
        }
        formData.append('file', this.file)
        if (this.file) {
          this.$confirm({
            title: '数据上传确认',
            content,
            okText: '确 定',
            icon: () => <a-icon type="exclamation-circle" theme="filled" style="color: #faad14"/>,
            cancelText: '取 消',
            onOk: () => {
              this.handleUpload(formData)
            },
            onCancel: () => {
              this.upSelectTime = this.upTimeList[0]
              this.fileList = []
              this.file = undefined
            }
          })
        }
      } else if (this.titleModel === '导出') {
        const params = { id, year }
        switch (this.currentIndex) {
          case 0:
            params.month = this.exportSelectTime
            content = year + '年' + this.exportSelectTime + '月' + dataType
            break
          case 1:
            params.quarter = this.exportSelectTime
            content = year + '年' + this.exportSelectTime + '季' + dataType
            break
          case 2:
            content = year + '年' + dataType
            break
        }
        // exportData(params).then((res) => {
        //   this.$emit('update:visible', false)
        //   const elink = document.createElement('a')
        //   const type = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8'
        //   elink.href = window.URL.createObjectURL(new Blob([res], { type }))
        //   elink.setAttribute('download', content)
        //   document.body.appendChild(elink)
        //   elink.click()
        //   window.URL.revokeObjectURL(elink.href) // 释放URL 对象
        //   document.body.removeChild(elink)
        // })
      }
    },
    // 上传状态
    changeUploadStatus ({ file }) {
      if (file) {
        this.file = file
      }
    },
    // 上传
    handleUpload (formData) {
      this.status = 1
      this.handle(true)
      // dataImport(
      //   formData,
      //   {
      //     config: {
      //       headers: {
      //         'Content-Type': 'multipart/form-data' // 文件上传时的格式
      //       }
      //     }
      //   }).then((res) => {
      //   if (res.success === false) {
      //     this.status = 0
      //     this.dataList = res.records.map((item, index) => {
      //       item.id = index + 1
      //       return item
      //     })
      //     this.handle(false)
      //     this.$emit('update:isShow1', true)
      //   } else {
      //     this.$emit('update')
      //     this.status = 2
      //     this.handle(true)
      //   }
      // })
    },
    handle (isShow2, status) {
      this.fileList = []
      this.file = undefined
      this.isShow2 = isShow2 || this.isShow2
    },
    // 清空上传展示列表
    handleRemove (file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    }
  }
}
</script>

<style lang="scss" scoped>
.modal-tip{
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1000;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.45);
  .data-upload-success,.data-uploading{
    position: absolute;
    left: 50%;
    top: 45%;
    transform: translate(-50%, -50%);
    border-radius: 2px;
  }
  .data-upload-success{
    padding-top: 28px;
    width: 332px;
    height: 192px;
    text-align: center;
    background: #FFFFFF;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    >p{
      font-size: 16px;
      margin: 0px 0px 13px 0px;
      font-weight: 500;
      text-align: center;
    }
    .icon{
      color: rgba(114,191,64,1);
      font-size: 62px;
    }
    .btn{
      padding-top: 21px;
    }
  }
  .data-uploading{
    padding-top: 10px;
    width: 234px;
    height: 74px;
    background: #FFFFFF;
    box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
    border-radius: 2px;
    >p{
      font-size: 16px;
      margin: 0;
      font-weight: 500;
      text-align: center;
    }
    .progress {
      margin: 10px auto;
      display: flex;
      background: rgba(0, 0, 0, 0.04);
      justify-content: space-around;
      align-items: center;
      height: 10px;
      text-align: center;
      border: 1px ridge rgba(24, 144, 255, .8);
      width: 130px;
      border-radius: 6px;
    }

    .sphere {
        height: 7.5px;
        width: 7.5px;
        border-radius: 50%;
        z-index: 20 !important;
        position: relative;
        transform: scale(.3);
        z-index: -1;
        background: radial-gradient(ellipse at center, rgba(24, 170, 255, .8) 0%,rgba(24, 144, 255, .8) 50%,rgba(24, 170, 255, .8) 100%); /* W3C */
    }

    .sphere:before {
      content: "";
      position: absolute;
      top: 1%;
      left: 5%;
      width: 90%;
      height: 90%;
      border-radius: 50%;
      background: -webkit-radial-gradient(50% 20%, circle, #ffffff, rgba(255, 255, 255, 0) 58%);
      z-index: 2;
    }
      .sphere1{
        animation: scale 3s 0s infinite;
      }

      .sphere2 {
        animation: scale 3s .3s infinite;
      }

      .sphere3 {
        animation: scale 3s .6s infinite;
      }

      .sphere4 {
        animation: scale 3s .9s infinite;
      }

      .sphere5 {
        animation: scale 3s 1.3s infinite;
      }

      .sphere6 {
        animation: scale 3s 1.6s infinite;
      }

      .sphere7 {
        animation: scale 3s 1.9s infinite;
      }

      .sphere8 {
        animation: scale 3s 2.3s infinite;
      }

      .sphere9 {
        animation: scale 3s 2.6s infinite;
      }

      .sphere10 {
        animation: scale 3s 2.9s infinite;
      }

    @keyframes scale {
        0%{
            transform: scale(.5);
        }
        35%, 65% {
              transform: scale(1);
        }
        65%, 100%{
          transform: scale(.5);
        }
    }
  }
}
.data-upload-fail{
    .data-table{
      height: 240px;
      overflow-y: auto;
    }
  }
::v-deep {
  .ant-alert {
    margin-top: 5px;
  }
  .ant-modal {
    width: 35rem !important;
    .data-upload,
    .data-delete,
    .data-export {
      .month {
        display: flex;
        .mark {
          width: 100px;
          margin-right: 10px;
          text-align: right;
        }
      }
      .headline {
        display: flex;
        margin-top: 5px;
        .mark {
          width: 100px;
          margin-right: 10px;
          text-align: right;
        }
      }
    }
    .ant-upload {
      border-color: #3482ff;
      .ant-btn {
        background: #3482ff;
        color: #fff;
      }
    }
  }
  .data-upload{
    width: 480px;
    height: 307px;
  }
  .data-delete,.data-export{
    width: 480px;
    height: 184px;
  }
  .data-upload-fail{
    width: 520px;
    height: 280px;
    >p{
      font-size: 14px;
    }
    .tip{
      font-weight: bold;
      color: #FF5F5B;
    }
  }
}
</style>
